App.require(function () {
    var app = App.getCurrent();

    app.defineComponent("str-native-select", {
        render: function (next) {
            this.computedData();
            this.fetch("./index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        getDomObj: function () {
            this.attachDom("select", "select")
                .attachDom("label", "label")
                .attachDom('[role="formitem"]', "textField")
                .attachDom('[role="formitemcontainer"]', "container")
                .attachDom(".ripple-line", "ripple")
                .attachDom('[role="help"]', "helpContainer")
                .attachEvent("select", "focus", this.focusHandler, false)
                .attachEvent("select", "change", this.changeHandler, false)
                .attachEvent("select", "blur", this.blurHandler, false);
        },
        init: function () {
            var property = this.property;
            if (property.assistivetype == "error") {
                this.domList.select.setCustomValidity(property.assistivetext);
            }
            var options = this.domList.select.options;
            if (property.value) {
                for (var i = 0; i < options.length; i++) {
                    if (property.value === options[i].value) options[i].selected = true;
                }
            }
            else {
                property.value = options[0].value;
            }
            if (typeof this.domList.select.value !== "undefined") {
                this.domList.textField.classList.add("str-text-edit");
            }
        },
        setEdit: function (target) {
            target = target || this.domList.select;
            target.parentNode.classList.add("str-text-edit");
            target.parentNode.classList.add("str-text-color");
        },
        removeEdit: function (target) {
            target = target || this.domList.select;
            if (typeof target.value === "undefined") {
                target.parentNode.classList.remove("str-text-edit");
            }
            target.parentNode.classList.remove("str-text-color");
        },
        focusHandler: function (ev) {
            var target = ev.target;
            this.setEdit(target);
            this.dispatchCustomEvent("selectfocus", { target: target, component: this, event: ev });
        },
        changeHandler: function (ev) {
            this.property.value = ev.target.value;
            this.dispatchCustomEvent("selectchange", { event: ev, component: this, target: ev.currentTarget });
        },
        blurHandler: function (ev) {
            var target = ev.target;
            this.removeEdit(target);
            this.dispatchCustomEvent("selectblur", { event: ev, target: target, component: this });
        },
        createClass: function () {
            var property = this.property, 
                classList = [],
                value = property.value;
            
            if (value) classList.push("str-text-edit");
            if (property.disabled) classList.push("str-text-field-disabled");
            if (property.readonly) classList.push("str-text-field-readonly");

            return classList.join(" ");
        },
        reset: function () {
            var select = this.domList.select, options = select.options;
           select.selectedIndex = 0;
            this.property.value = options[0].value;
        },
        focus: function () {
            this.domList.select.focus();
        },
        blur: function () {
            this.domList.select.blur();
        },
        addOption: function (value, content) {
            var select = this.domList.select, option = new Option(content, value);
            select.add(option);
        },
        removeOption: function (value) {
            var select = this.domList.select, options = select.options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].value === value) break;
            }
            if (options[i].selected) {
                if (i == 0) this.property.value = options[1].value;
                this.property.value = options[0].value;
            }
            select.remove(i);
        },
        computedData: function () {
            var property = this.property;
            property.rendertype = property.rendertype || "filled";
            property.size = property.size || "normal";
            property.name = property.name || this.uid;
            property.label = property.label || property.name;
            property.value = property.value || "";
            property.class = property.class || "";
            property.form = property.form || "";
            this.data.optionlist = this.slot;
            property.required = typeof property.required !== "undefined" ? "required" : "";
            property.readonly = typeof property.readonly !== "undefined" ? "readonly" : "";
            property.disabled = typeof property.disabled !== "undefined" ? "disabled" : "";
            property.autofocus = typeof property.autofocus !== "undefined" ? "autofocus" : "";
            property.hiddenbottom = typeof property.hiddenbottom !== "undefined" ? "hiddenbottom" : "";
            this.data.itemrendertype = this.createPropertyStr({
                rendertype: property.rendertype,
                size: property.size,
                leadicon: property.leadicon,
                trailicon: property.trailicon,
                class: this.createClass(),
                assistivetype: property.assistivetype
            });
            this.data.addtionattribute = this.createPropertyStr({
                autofocus: property.autofocus,
                readonly: property.readonly,
                require: property.require,
                disabled: property.disabled,
                name: property.name,
                id: property.id,
                form: property.form
            });
        },
        get hiddenbottom() {
            return this.property.hiddenbottom;
        },
        set hiddenbottom(value) {
            value = value ? "hiddenbottom" : "";
            if (value === this.property.hiddenbottom) return;
            var classList = this.domList.helpContainer.classList;
            if (value) {
                classList.add(value);
            }
            else {
                classList.remove(value);
            }
            this.property.hiddenbottom = value;
        },
        get disabled() {
            return this.property.disabled;
        },
        set disabled(value) {
            value = value ? "disabled" : "";
            if (this.property.disabled === value) return;
            var classList = this.domList.textField.classList; 
            if (value) {
                this.domList.select.setAttribute("disabled", "");
                this.property.disabled = "disabled";
                classList.add("str-text-field-disabled");
            }
            else {
                this.domList.select.removeAttribute("disabled");
                this.property.disabled = "";
                classList.add("str-text-field-disabled");
            }
        },
        get required() {
            return this.property.required;
        },
        set required(value) {
            value = value ? "required" : "";
            if (this.property.required === value) return;
            
            if (value) {
                this.domList.select.setAttribute("required", "");
                this.property.required = "required";
            }
            else {
                this.domList.select.removeAttribute("required");
                this.property.required = "";
            }
        },
        get readonly() {
            return this.property.readonly;
        },
        set readonly(value) {
            value = value ? "readonly" : "";
            if (this.property.readonly === value) return;
            var classList = this.domList.textField.classList; 
            if (value) {
                this.domList.select.setAttribute("readonly", "");
                this.property.readonly = "readonly";
                classList.add("str-text-field-readonly");
            }
            else {
                this.domList.select.removeAttribute("readonly");
                this.property.readonly = "";
                classList.remove("str-text-field-readonly");
            }
        },
        get autofocus() {
            return this.property.autofocus;
        },
        get form() {
            return this.property.form;
        },
        set form(value) {
            if (this.property.form === value) return;
            this.domList.select.form = value;
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.domList.container.className = value;
            this.property.class = value;
        },
        get value() {
            return this.property.value;
        },
        set value(val) {
            if (val === this.property.value) return;

            var options = this.domList.select.options;
            if (val) {
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value == val) {
                        options[i].selected = true;
                    }
                }
                this.property.value = val;
            }
            else {
                options[0].selected = true;
                this.property.value = options[0].value;
            }
        },
        get label() {
            return this.property.label;
        },
        set label(value) {
            var property = this.property;
            property.label = value;
            this.domList.textField.firstElementChild.textContent = value;
        },
        get name() {
            return this.property.name;
        },
        set name(val) {
            if (this.property.name === val) return;
            var input = this.domList.select, label = this.domList.label;
            input.name = val;
            input.id = val;
            label.htmlFor = val;
            this.property.name = val;
        },
        get size() {
            return this.property.size;
        },
        set size(value) {
            if (this.property.size === value) return;
            this.domList.textField.setAttribute("size", value);
            this.property.size = value;
        },
        get rendertype() {
            return this.property.rendertype;
        },
        set rendertype(value) {
            var property = this.property;
            if (property.rendertype === value) return;
            var textField = this.domList.textField, input = this.domList.input;
            textField.setAttribute("rendertype", value);
            property.rendertype = value;
            if (property.size === "small" && property.rendertype === "filled") {
                input.placeholder= property.label;
            }
        },
        set leadicon(val) {
            if (val === this.property.leadicon) return;
            var property = this.property, oldIcon = property.leadicon;
            this.domList.textField.setAttribute("leadicon", val);
            if (oldIcon) {
                var component = this.getComponentById("lead");
                if (val) component.icon = val;
                else {
                    this.removeComponent(component);
                    this.domList.textField.removeAttribute("leadicon");
                }
            }
            else {
                this.insertAdjacentHTML(this.domList.ripple, '<str-icon id="lead" class="leadicon" icon="' + val + '" width="24" height="24" nofocus></str-icon>', "afterend");
            }
            property.leadicon = val;
        },
        get leadicon() {
            return this.property.leadicon;
        },
        set trailicon(val) {
            if (val === this.property.trailicon) return;
            this.domList.textField.setAttribute("trailicon", val);
            var property = this.property, oldIcon = property.trailicon;
            if (oldIcon) {
                var component = this.getComponentById("trail");
                if (val) component.icon = val;
                else {
                    this.removeComponent(component);
                    this.domList.textField.removeAttribute("trailicon");
                }
            }
            else {
                this.insertAdjacentHTML(this.domList.textField, '<str-icon id="trail" class="trailicon" icon="' + val + '" width="24" height="24" nofocus></str-icon>', "beforeend");
            }
            property.trailicon = val;
        },
        get trailicon() {
            return this.property.trailicon;
        },
        get assistivetype() {
            return this.property.assistivetype;
        },
        get assistivetext() {
            return this.property.assistivetext;
        },
        set assistive(obj) {
            var property = this.property, oldType = property.assistivetype, textField = this.domList.textField;
            var container = this.domList.helpContainer;
            if (!obj.type) {
                if (oldType) {
                    container.removeChild(container.firstElementChild);
                    textField.removeAttribute("assisitivetext");
                }
                property.assistivetext = obj.text;
                property.assistivetype = obj.type;
                return;
            }
            if (!oldType) {
                var div = document.createElement("div");
                div.className = "addtion-" + obj.type;
                div.textContent = obj.text;
                if (obj.type === "error") textField.setAttribute("assisitivetext", "error");
                container.appendChild(div);
            }
            else {
                var target = container.firstElementChild;
                if (oldType !== obj.type) {
                    target.className =" addtion-" + obj.type;
                    textField.setAttribute("assisitivetext", obj.type);
                }
                target.textContent = obj.text;
            }
            property.assistivetext = obj.text;
            property.assistivetype = obj.type;
        },
        get assistive() {
            var property = this.property;
            return {
                type: property.assistivetype,
                text: property.assistivetext
            }
        }
    });
})